<template>
	<view>
		<!-- 收获地址 -->
		<view class="address" @tap="changeAddr">
			<view class="top">
				<view class="name">{{ addr.name }}</view>
				<view class="phone">{{ addr.phone }}</view>
			</view>
			<view class="bottom">
				<text>{{addr.province + addr.city + addr.county + addr.address}}</text>
				<u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
			</view>
		</view>
		
		<!-- 购物车详情 -->
		<view class="cart-box">
			<view class="cart-detail" v-for="(cart, index) in carts" :key="index">
				<view class="goods">
					<view class="goods-img">
						<u-image width="300rpx" height="300rpx" :src="cart.goods.cover_url"></u-image>
					</view>
					<view class="cart-msg">
						<view class="goods-title u-line-1">{{cart.goods.title}}</view>
						<view class="goods-price">￥{{cart.goods.price}}</view>
					</view>
					<view class="cart-num">x{{cart.num}}</view>
				</view>
				<u-line border-style="dotted" color="info"></u-line>
			</view>
			
		</view>
		
		<!-- 提交订单 -->
		<view class="navigation">
			<view class="left">
				<view class="item">
					合计:￥{{totalPrice}}
				</view>
			</view>
			<view class="right" @tap="orderAdd">
				<view class="buy btn u-line-1">提交订单</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addr: {name:'', phone: '', province: '', city: '', county: '', address: ''},
				carts: [],
				addrId: null
			}
		},
		onLoad(options) {
			if(this.$u.utils.isLogin()){
				// 如果是从收获地址也返回
				if(options.addrId){
					this.addrId = options.addrId
				}
				this.getData()
			}
		},
		computed:{
			totalPrice(){
				let total = 0
				this.carts.forEach((item) => {
					total += item.goods.price * item.num
				})
				return total
			}
		},
		methods: {
			async getData(){
				const data = await this.$u.api.orderPrew();
				//地址相关数据
				let tempArry = []
				if(!this.addrId){
					tempArry = data.address.filter(item => item.is_default == 1);
				}else{
					tempArry = data.address.filter(item => item.id == this.addrId);
				}
				if(tempArry.length > 0){
					this.addr = tempArry[0]
				}
				console.log(data);
				// 购物车数据
				this.carts = data.carts;
			},
			changeAddr(){
				// 缓存当前页,用于登陆成功后跳转返回
				const currentPage = getCurrentPages().pop();
				const {options, route} = currentPage;
				const optionsKeys = Object.keys(options);
				let params = '';
				params = optionsKeys.reduce((pre, current) => {
					return `${pre}${current}=${options[current]}&`
				}, '?').slice(0,params.length-1);
				
				uni.setStorageSync("order_prew_url", route + params);
				this.$u.route({
					type:'redirectTo',
					url: 'pages/address/address'
				})
			},
			async orderAdd(){
				const orderDetail = await this.$u.api.orderAdd({address_id: this.addr.id})
				this.$u.toast('提交成功');
				setTimeout(()=> {
					this.$u.route({
						type:'redirectTo',
						url: 'pages/order/orderDone?id=' + orderDetail.id
					})
				}, 1500)
			}
			
		}
		
	}
</script>


<style lang="scss" scoped>
.address {
	padding: 40rpx 20rpx;
	.top {
		display: flex;
		font-weight: bold;
		font-size: 34rpx;
		.phone {
			margin-left: 60rpx;
		}
	}
	.bottom {
		display: flex;
		margin-top: 20rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
	}
}
.cart-box {
	padding: 20rpx 10rpx 10rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	.cart-detail{
		display: flex;
		flex-direction: column;
		.goods{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx 0 0;
			.goods-img{
				flex: 1;
				height: 300rpx;
			}
			.cart-msg{
				flex-grow: 2;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				height: 200rpx;
			}
			.cart-num{
				flex: 1;
			}
		}
	}
	padding-bottom: 100rpx;
}

.navigation {
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0;
	width: 750rpx;
	flex-direction: row;
	justify-content: space-between;
	.left {
		display: flex;
		font-size: 30rpx;
		align-items: center;
		.item {
			margin: 0 30rpx;
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}

</style>

